<template>
  <view class="message-card card-common" :hover-class="'card-hover'">
    <view class="card-container flex-row">
      <!-- 左侧头像 -->
      <view class="avatar-container">
        <image
          class="student-avatar"
          :src="
            studentInfo.avatar
              ? config.baseURL + studentInfo.avatar
              : config.baseURL + config.defaultAvatar
          "
        ></image>
      </view>

      <!-- 右侧信息区域 -->
      <view class="info-container flex-col">
        <!-- 顶部信息：姓名 -->
        <view class="top-info">
          <view class="card-title">{{ studentInfo.name }}</view>
        </view>

        <!-- 中间信息：年龄、性别等 -->
        <view class="middle-info">
          <view class="content-item flex-row">
            <text class="item-label">年龄:</text>
            <text class="item-value">{{ calculateAge(studentInfo.birthday) }}</text>
          </view>
          <view class="content-item flex-row">
            <text class="item-label">性别:</text>
            <text class="item-value">{{ studentInfo.gender === '0' ? '男' : '女' }}</text>
          </view>
          <view class="content-item flex-row">
            <text class="item-label">联系人:</text>
            <text class="item-value">{{ studentInfo.guardian }}</text>
          </view>
          <view class="content-item flex-row">
            <text class="item-label">联系电话:</text>
            <text class="item-value">{{ studentInfo.guardianPhone }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部操作按钮 -->
    <view class="card-footer flex-row justify-end">
      <button class="btn-common btn-purchase" size="mini" @click.stop="navigateToPurchase">
        购课
      </button>
      <button class="btn-common btn-edit" size="mini" @click.stop="navigateToEdit">编辑</button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { defineProps } from 'vue'
import type { StudentInfoItem } from '@/types/studentInfo'
import { config } from '@/global'

const props = defineProps<{
  studentInfo: StudentInfoItem
}>()

// 计算年龄的辅助函数
const calculateAge = (birthDate?: string) => {
  if (!birthDate) return '未知'
  const birth = new Date(birthDate)
  const now = new Date()
  let age = now.getFullYear() - birth.getFullYear()
  const monthDiff = now.getMonth() - birth.getMonth()
  if (monthDiff < 0 || (monthDiff === 0 && now.getDate() < birth.getDate())) {
    age--
  }
  return age
}

// 跳转到购课页面
const navigateToPurchase = () => {
  const studentId = props.studentInfo.id
  uni.navigateTo({
    url: `/pages/student/purchase?studentId=${studentId}`,
  })
}

// 跳转到编辑学生页面
const navigateToEdit = () => {
  const studentId = props.studentInfo.id
  uni.navigateTo({
    url: `/pages/student/addOrUpdate?id=${studentId}`,
  })
}
</script>
<style scoped lang="scss">
.message-card {
  padding: 20rpx;
  margin: 20rpx;
  background-color: $student-card-bg;
  border-radius: $student-border-radius;
  box-shadow: $student-shadow;
  overflow: hidden;
  transition: all 0.3s ease;
}

.card-hover {
  transform: translateY(-3rpx);
  box-shadow: $student-hover-shadow;
}

.card-container {
  width: 100%;
  align-items: center;

  .avatar-container {
    margin-right: 30rpx;
    flex-shrink: 0;

    .student-avatar {
      width: 120rpx;
      height: 120rpx;
      border-radius: 50%;
    }
  }

  .info-container {
    flex: 1;

    .top-info {
      margin-bottom: 10rpx;

      .card-title {
        font-size: 36rpx;
        font-weight: bold;
        color: $student-text-primary;
      }
    }

    .middle-info {
      .content-item {
        margin-bottom: 16rpx;

        .item-label {
          width: 150rpx;
          font-size: 28rpx;
          color: $student-text-tertiary;
        }

        .item-value {
          flex: 1;
          font-size: 28rpx;
          color: $student-text-primary;
          line-height: 1.5;
        }
      }
    }
  }
}

.card-footer {
  margin-top: 16rpx;
  padding-top: 16rpx;
  border-top: 1rpx solid $student-border-color;

  .btn-common {
    margin-left: 16rpx;
    border-radius: 24rpx;
    padding: 0 24rpx;
    font-size: 26rpx;
    height: 60rpx;
    line-height: 60rpx;
  }

  .btn-purchase {
    color: #409eff;
    background-color: rgba(64, 158, 255, 0.1);
  }

  .btn-edit {
    color: #67c23a;
    background-color: rgba(103, 194, 58, 0.1);
  }
}

.warning {
  background-color: $student-warning-color !important;
  color: #fff !important;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.justify-end {
  justify-content: flex-end;
}
</style>
